<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <style>
        body {
            position: relative;
            min-width: 1200px;
            background: #f2f2f2;
        }

        .title {
            width: 100%;
            height: 60px;
            margin-left: 13px;
            /* border: 1px solid red; */
            background: white;
            line-height: 60px;
            border-top: 1px solid #f2f2f2;
        }

        .a1 {
            width: 30%;
            height: 300px;
            /* border: 1px solid red; */
            margin-top: 20px;
            background: white;
            margin-left: 1%;
            float: left;

        }

        .a1 p {
            width: 100%;
            height: 50px;
            background: white;
            color: #999999;
            line-height: 50px;
            text-indent: 15px;
            border-bottom: 1px solid #f2f2f2;
        }

        .tubiao {
            width: 27%;
            height: 90px;
            /* border: 1px solid red; */
            margin-left: 4%;
            float: left;
            margin-top: 30px;
        }

        .tubiao:hover {
            background: rgb(217, 217, 217);
        }

        .tubiao img {
            width: 80%;
            height: 60%;
            margin-left: 10%;
            margin-top: 10%;
        }

        .tubiao span {
            text-align: center;
            font-size: 12px;
            line-height: 14px;
            margin-left: 30%;
        }

        .waitevent {
            width: 40%;
            height: 30%;
            /* border: 1px solid red; */
            float: left;
            margin-top: 7%;
            margin-left: 6%;
            font-size: 15px;
            line-height: 15px;
            color: #999999;
            text-indent: 10px;
            background: #f8f8f8;
        }

        .waitevent:hover {
            background: rgb(217, 217, 217);
        }

        h2 {
            font-size: 30px;
            margin-top: 15%;
            color: #009688;
        }

        .right {
            width: 35%;
            height: 440px;
            /* border: 1px solid red; */
            margin-top: 20px;
            float: right;
            margin-right: 1%;
        }

        .right p {
            width: 100%;
            height: 50px;
            background: white;
            color: #999999;
            line-height: 50px;
            text-indent: 15px;
            border-bottom: 1px solid #f2f2f2;
        }

        table {
            width: 100%;
            height: 89%;
        }

        table,
        td,
        th {
            border: 1px solid black;
            border-collapse: collapse;
            color: #606266;

        }

        td {
            background: #ffffff;
        }

        #first {
            background: #f5f7fa;
        }

        .last {
            width: 35%;
            height: 300px;
            /* border: 1px solid red; */
            float: right;
            margin-right: 1%;
            position: absolute;
            left: 63.8%;
            top: 550px;
            background: #ffffff;
        }

        .last p:nth-child(1) {
            width: 100%;
            height: 50px;
            background: white;
            color: #999999;
            line-height: 50px;
            text-indent: 15px;
            border-bottom: 1px solid #f2f2f2;
        }

        .last p:nth-child(2) {
            margin-top: 15px;
        }

        #data {
            background: #ffffff;
            width: 61%;
            margin-left: 1%;
            height: 350px;
            /* border: 1px solid red; */
            float: left;
            position: absolute;
            top: 400px;
            left: 0;
        }

        #data p {
            width: 100%;
            height: 50px;
            /* border: 1px solid red; */
            line-height: 50px;
            margin-left: 10px;
        }

        #data ul {
            margin-left: 35px;
            position: absolute;
            left: 75%;
            top: 15px;
        }

        #data ul li {
            width: 15px;
            height: 15px;
            /* border: 1px solid red; */
            border-radius: 50%;
            background: #999999;
            float: left;
            margin-left: 5px;
            cursor: pointer;
        }

        #data strong {
            margin-left: 10px;
        }

        #opation {
            position: absolute;
            left: 10px;
            top: 500px;
            width: 700px;
            height: 250px;
        }
    </style>
</head>

<body>
    <p class="title">首页</p>

    <div class="a1">
        <p>快捷方式</p>
        <div class="tubiao "> <img src="./img/tubiao1.jpg" alt=""> <span>方式一</span> </div>
        <div class="tubiao "> <img src="./img/tubiao1.jpg" alt=""> <span>方式二</span> </div>
        <div class="tubiao "> <img src="./img/tubiao1.jpg" alt=""> <span>方式三</span> </div>
        <div class="tubiao "> <img src="./img/tubiao1.jpg" alt=""> <span>方式四</span> </div>
        <div class="tubiao "> <img src="./img/tubiao1.jpg" alt=""> <span>方式五</span> </div>
        <div class="tubiao "> <img src="./img/tubiao1.jpg" alt=""> <span>方式六</span> </div>
    </div>
    <div class="a1">
        <p>代办事项</p>
        <div class="waitevent" >待跟进学员 <h2 id="waitevent1">66</h2>
        </div>
        <div class="waitevent" >待跟进院校 <h2 id="waitevent2">166</h2>
        </div>
        <div class="waitevent">待审核 <h2>666</h2>
        </div>
        <div class="waitevent">待缴费 <h2>66666</h2>
        </div>
    </div>

    <!-- 右边 -->
    <div id="data">
        <p>数据预览</p>
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <strong>年度月份报名量</strong>
    </div>
    <div id="opation">

    </div>

    <div class="right">
        <p>最近缴费</p>
        <table>
            <tr id="first">
                <th></th>
                <th colspan="4">姓名</th>
                <th colspan="3">毕业院校</th>
                <th colspan="7">电话</th>
            </tr>
            <tr>
                <td>1</td>
                <td colspan="4">王小虎</td>
                <td colspan="3">北京大学</td>
                <td colspan="7">18438593600</td>
            </tr>
            <tr>
                <td>2</td>
                <td colspan="4">王小虎</td>
                <td colspan="3">北京大学</td>
                <td colspan="7">18438593600</td>
            </tr>
            <tr>
                <td>3</td>
                <td colspan="4">王小虎</td>
                <td colspan="3">北京大学</td>
                <td colspan="7">18438593600</td>
            </tr>
            <tr>
                <td>4</td>
                <td colspan="4">王小虎</td>
                <td colspan="3">北京大学</td>
                <td colspan="7">18438593600</td>
            </tr>
            </tr>
            <tr>
                <td>5</td>
                <td colspan="4">王小虎</td>
                <td colspan="3">北京大学</td>
                <td colspan="7">18438593600</td>
            </tr>
            </tr>
            <tr>
                <td>6</td>
                <td colspan="4">王小虎</td>
                <td colspan="3">北京大学</td>
                <td colspan="7">18438593600</td>
            </tr>
            <tr>
                <td>7</td>
                <td colspan="4">王小虎</td>
                <td colspan="3">北京大学</td>
                <td colspan="7">18438593600</td>
            </tr>
            <tr>
                <td>8</td>
                <td colspan="4">王小虎</td>
                <td colspan="3">北京大学</td>
                <td colspan="7">18438593600</td>
            </tr>
            <tr>
                <td>9</td>
                <td colspan="4">王小虎</td>
                <td colspan="3">北京大学</td>
                <td colspan="7">18438593600</td>
            </tr>
            <tr>
                <td>10</td>
                <td colspan="4">王小虎</td>
                <td colspan="3">北京大学</td>
                <td colspan="7">18438593600</td>
            </tr>
        </table>
    </div>
    <div class="last">
        <p>最新动态</p>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;一直以来, 量子矩阵OA就是整个OA界最神秘, 最强大的OA产品. 强大到什么程度呢?开发者都说不上来...^_^O(∩_∩)O哈哈~
        </p>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;喜报: 量子矩阵获得教育部高等教育司2019年度首批产学合作协同育人项目单位</p>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;喜报: 量子矩阵获得教育部高等教育司2019年度首批产学合作协同育人项目单位</p>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;喜报: 量子矩阵获得教育部高等教育司2019年度首批产学合作协同育人项目单位</p>

    </div>
    </div>

</body>

</html>
<script src="js/jquery-3.4.1.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.3.0-rc.2/echarts-en.common.js"></script>
<script src="./js/url.js"></script>
<script>
    $(function () {
        $.ajax({
            url: SetUrl.condataUrl,
            type: 'post',
            dataType: 'json',
            data: {
                empId: '10001',
                moduleId: '1',
            },
            success: function (data) {
                console.log(data);
                $("#waitevent1").html(data.result);
            },
            error: function (xhr, errorInfo) {
                console.log('ajax请求失败');
            }
        });
        $.ajax({
            url: SetUrl.condataUrl,
            type: 'post',
            dataType: 'json',
            data: {
                empId: '10001',
                moduleId: '2',
            },
            success: function (data) {
                console.log(data);
                $("#waitevent2").html(data.result);
            },
            error: function (xhr, errorInfo) {
                console.log('ajax请求失败');
            }
        });
    })
    optionA = {
        xAxis: {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月']
        },
        yAxis: {
            type: 'value',
            max: 60,
            minInterval: 1,
            boundaryGap: [0, 0.1]
        },
        series: [{
            data: [12, 20, 15, 60, 40, 40, 13, 20],
            type: 'bar'
        }]
    };
    var myChart = echarts.init(document.getElementById('opation'));
    myChart.setOption(optionA);
    $("#data ul li:eq(0)").on("click", function () {
        myChart.setOption(optionA);
        $("#data strong").html('年度月份报名量');
        $(this).css({
            backgroundColor: '#999'
        }).siblings().css({
            backgroundColor: '#e2e2e2'
        });
    });
    $("#data ul li:eq(1)").on("click", function () {
        optionB = {
            xAxis: {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月']
            },
            yAxis: {
                type: 'value',
                max: 60,
                minInterval: 1,
                boundaryGap: [0, 0.1]
            },
            series: [{
                data: [12, 20, 15, 60, 40, 40, 13, 20],
                type: 'line'
            }]
        };
        myChart.setOption(optionB);
        $("#data strong").html('年度月份资讯量');
        $(this).css({
            backgroundColor: '#999'
        }).siblings().css({
            backgroundColor: '#e2e2e2'
        });
    });
    $("#data ul li:eq(2)").on("click", function () {
        optionC = {
            xAxis: {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月']
            },
            yAxis: {
                type: 'value',
                max: 60,
                minInterval: 1,
                boundaryGap: [0, 0.1]
            },
            series: [{
                data: [3, 25, 15, 10, 30, 6, 54, 36],
                type: 'bar'
            }]
        };
        myChart.setOption(optionC);
        $("#data strong").html('年度月份退费量');
        $(this).css({
            backgroundColor: '#999'
        }).siblings().css({
            backgroundColor: '#e2e2e2'
        });
    });
</script>